<template>
  <div class="application-navbar">
    <van-grid class="applicate-grid" clickable>
      <van-grid-item
        v-for="(item, idx) in depts" :key="idx"
        class="applicate-grid-item" :style="'background:'+item.remark.split(':')[0]"
      >
        <div slot="default" class="applicate-btn" @click="clickBtn(item)">
          <img :src="item.remark.split(':')[1]" alt />
          <span>{{ item.label }}</span>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
import { DICT_TYPE, getDictDatas } from '@/utils/dict'

export default {
  data() {
    return {
      depts: [
        ...getDictDatas(DICT_TYPE.RECRUIT_DEPT),
        {
          value: '-1',
          label: '信息登记',
          remark: '#EFFFF2;https://minio.zeweb.org.cn/ze-oa/c7217d12629f639b7861684f8521ae474352ce74cbf026ae3afc99693fdeedcc.png',
        },
      ],
    }
  },
  methods: {
    clickBtn(item) {
      if (item.label === '信息登记') {
        // uni.navigateTo({
        //   url: `/package-guest/pages/info-regist/index?name=${item.value}`,
        // })
        uni.navigateTo({
          url: `/package-guest/pages/info-regist/info-regist?name=${item.value}`,
        })
      } else {
        uni.navigateTo({
          url: `/package-guest/pages/talent-recruit/index?name=${item.value}`,
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.application-navbar{
  width:100%;
  height:200px;
  margin-top: 10px;
  .applicate-grid{
    display:flex;
    justify-content:space-between;
    flex-wrap: wrap;
    width: 93%;
    height:100%;
    margin: 0 auto;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06);
    border-radius: 2px;
    padding-top: 12px;
    .applicate-grid-item{
      width:22.5%;
      height:44.5%;
      display: flex;
      align-items: center;
      justify-content: center;
      .applicate-btn{
        display: flex;
        flex-flow: column;
        align-items: center;
        img{
          width:38px;
          height:38px;
        }
        span{
            font-size: 14px;
            color:#000;
        }
      }
    }
  }
}
</style>
